<!-- Created by henian.xu on 2018/11/12. -->

<template>
    <div
        :class="['classify-item',...statusClass]"
        ref="self">
        <div
            class="out-show"
            @click="onSwitch">
            {{ model||placeholder }}
            <i class="f-icon">&#xf107;</i>
        </div>

        <!-- popup -->
        <div
            class="popup classify-item-popup"
            ref="popup"
            :style="positionStyle">
            <div
                :class="['item',{active:value===item.id}]"
                v-for="(item,index) in data"
                :key="item.id||index"
                @click="onItem(item)">{{ item.name }}</div>
        </div>
    </div>
</template>

<script>
import popupMixins from '~/mixins/popup.vue';
import clickoutside from '~/utils/ClickOutSide.js';
export default {
    name: 'ClassifyItem',
    mixins: [popupMixins],
    directives: { clickoutside },
    data() {
        return {
            appLevel: false,
            alignSelf: false,
        };
    },
    props: {
        value: {
            type: Number,
            default: 0,
        },
        placeholder: {
            type: String,
            default: '请选择',
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    computed: {
        model: {
            get() {
                return (this.dataMap[this.value] || {}).name;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        dataMap() {
            return this.data.reduce((p, c) => ((p[c.id] = c), p), {});
        },
    },
    methods: {
        onItem(item) {
            this.model = item.id;
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.classify-item {
    position: relative;
    display: inline-block;
    > .out-show {
        position: relative;
        z-index: $z-index-2;
        background-color: #fff;
        border: 1px solid $color-border;
        padding: $padding-small $padding;
        cursor: pointer;

        > .f-icon {
            margin-left: $margin-small;
        }
    }

    &-popup {
        display: none;
        position: absolute;
        z-index: $z-index-1;
        top: 100%;
        left: 0;
        width: 360px;
        background-color: #fff;
        padding: $padding-small;
        border: 1px solid $color-border;
        margin-top: -1px;
        font-size: 12px;

        > .item {
            width: 70px;
            display: inline-block;
            padding: $padding-small;
            cursor: pointer;
            @include text-line(1);

            &:hover {
                background-color: mix($color-main, #fff, 10%);
            }
            &.active {
                background-color: $color-main;
                color: #fff;
            }
        }
    }
    &:hover {
        > .out-show {
            border-bottom: 1px solid #fff;
        }
        > .classify-item-popup {
            display: block;
        }
    }
}
</style>
